<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
      <el-form-item label="设备名称" prop="deviceName">
        <el-input
          v-model="queryParams.deviceName"
          placeholder="请输入设备名称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="设备编号" prop="deviceCode">
        <el-input
          v-model="queryParams.deviceCode"
          placeholder="请输入设备编号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="检验部门" prop="deptId">
        <el-cascader
          :props="{ value: 'id', checkStrictly: true }"
          :show-all-levels="false"
          placeholder="请选择部门"
          v-model="queryParams.deptId"
          :options="deptOptions"
        ></el-cascader>
      </el-form-item>
      <el-form-item label="日期">
        <el-date-picker
          v-model="dateRange"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          style="width: 240px"
          :default-time="['00:00:00', '23:59:59']"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <!-- <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['system:user:add']"
          >新增</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['system:user:edit']"
          >修改</el-button
      >-->
      <!-- </el-col> -->
      <!-- <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['system:user:remove']"
          >删除</el-button
        >
      </el-col>-->
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['equipment:resultConfirm:export']"
        >导出</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="printBox"
          v-hasPermi="['equipment:resultConfirm:print']"
        >打印</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-document-copy"
          size="mini"
          @click="handleClone"
          :disabled="single"
          v-hasPermi="['equipment:resultConfirm:clone']"
        >克隆</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table
      @selection-change="handleSelectionChange"
      fit
      v-loading="loading"
      border
      :data="dataList"
    >
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column :show-overflow-tooltip="true" label="索引号 " prop="piid" />
      <el-table-column show-overflow-tooltip label="流程状态">
        <template slot-scope="scope">
          <el-tag size="mini">{{ scope.row.statusName }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="设备编号" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <el-link @click="handleDetail(scope.row)" type="primary">
            {{
            scope.row.deviceCode
            }}
          </el-link>
        </template>
      </el-table-column>
      <el-table-column label="设备名称" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <el-link @click="handleDetail(scope.row)" type="primary">
            {{
            scope.row.deviceName
            }}
          </el-link>
        </template>
      </el-table-column>

      <el-table-column :show-overflow-tooltip="true" label="所属部门 " prop="deptName" />
      <el-table-column :show-overflow-tooltip="true" label="位置" prop="site" />
      <el-table-column :show-overflow-tooltip="true" label="管理人" prop="managerUserName" />
      <el-table-column label="校准/计量检定有效期" prop="checkPeriod">
        <template slot-scope="scope">{{ scope.row.checkPeriod }}个月</template>
      </el-table-column>

      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-view"
            v-hasPermi="['equipment:resultConfirm:info']"
            @click="handleDetail(scope.row)"
          >详情</el-button>
          <!-- v-if="scope.row.status === 'refuse'" -->
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['equipment:resultConfirm:edit']"
          >修改</el-button>
          <!--
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['company:news:remove']"
            >删除</el-button
          >-->
        </template>
      </el-table-column>
    </el-table>
    <!-- 打印模板位置 -->
    <PrintBox
      :pageNum="queryParams.pageNum"
      :total="total"
      :printRow="printList"
      :isVertical="false"
      :isPageSize="true"
      :paddrg="100"
      :checkNum="6"
      id="printBox"
    >
      <template slot="title" slot-scope="scope">
        <div style="margin-bottom: 10px">设备检定/校准结果符合性确认表 STET/B/22-3</div>
      </template>
      <template slot-scope="scope">
        <!-- 表格  class  table-page  必须-->
        <table
          style="border-collapse: collapse"
          border="1"
          cellspacing="0"
          class="table-page"
          :isVertical="false"
        >
          <tr style="height: 20mm">
            <td colspan="2" style="width: 30mm">设备名称</td>
            <td colspan="4">{{ scope.item.deviceName }}</td>
            <td colspan="2" style="width: 60mm">设备编号</td>
            <td colspan="3" style="width: 70mm">{{ scope.item.deviceCode }}</td>
          </tr>
          <tr style="height: 20mm">
            <td colspan="2" style="width: 30mm">设备用途</td>
            <td colspan="4" style="width: 80mm;">{{ scope.item.useInfo }}</td>
            <td colspan="2" style="width: 60mm">保管部门</td>
            <td colspan="3" style="width: 70mm">{{ scope.item.deptName }}</td>
          </tr>
          <tr style="height: 20mm">
            <td colspan="2" style="width: 30mm">检定/校准单位</td>
            <td
              style="width: 70mm"
              colspan="4"
              v-for="item in dict.type.sys_organ_type"
              v-if="item.value ==scope.item.organ"
            >{{item.label }}</td>
            <td colspan="2" style="width: 30mm">检定/校准周期(月)</td>
            <td colspan="3" style="width: 60mm">{{ scope.item.checkPeriod }}</td>
          </tr>
          <tr style="height: 20mm">
            <td colspan="2" style="width: 30mm">证书/报告性质</td>
            <td colspan="4">
              <div style="display: flex; justify-content: space-between">
                <div style="display: flex; align-items: center; width: 30mm">
                  <input type="checkbox" :checked="scope.item.certTypeValue == '0'" />检定证书
                </div>
                <div style="display: flex; align-items: center; width: 30mm">
                  <input type="checkbox" :checked="scope.item.certTypeValue == '1'" />校准证书
                </div>
              </div>
              <div
                style="
                  display: flex;
                  align-items: center;
                  width: 30mm;
                  margin-top: 5mm;
                "
              >
                <input type="checkbox" :checked="scope.item.certTypeValue == '2'" />测试报告
              </div>
            </td>
            <td colspan="2" style="width: 60mm">证书/报告编号</td>
            <td colspan="3" style="width: 50mm">{{ scope.item.code }}</td>
          </tr>
          <tr style="height: 20mm">
            <td colspan="2" style="width: 30mm">设备类型</td>
            <td colspan="9">
              <div style="display: flex; align-items: center">
                <div style="display: flex; align-items: center; width: 20mm">
                  <input
                    type="checkbox"
                    :checked="scope.item.deviceTypeValue == 11 ||
                    scope.item.deviceTypeValue == 12
                    "
                  />成套设备
                </div>（
                <div style="display: flex; align-items: center; width: 20mm">
                  <input type="checkbox" :checked="scope.item.deviceTypeValue == 11" />主设备
                </div>
                <div style="display: flex; align-items: center; width: 20mm">
                  <input type="checkbox" :checked="scope.item.deviceTypeValue == 12" />分设备
                </div>）（编号范围：
                <div style="width: 70mm">{{ scope.item.codeRange }}</div>）
                <div
                  style="
                    display: flex;
                    align-items: center;
                    width: 20mm;
                    margin-left: 5mm;
                  "
                >
                  <input type="checkbox" :checked="scope.item.deviceTypeValue == 2" />独立设备
                </div>
              </div>
            </td>
          </tr>
          <tr>
            <td
              :rowspan="scope.item.contentList.length"
              style="width: 5mm; padding: 2mm; line-height: 13px"
            >证书报告确认内容</td>
            <td
              colspan="8"
              style="text-align: left; height: 10mm;"
            >1、{{ scope.item.contentList[0].contentLabel }}</td>
            <td rowspan="1">
              <div style="display: flex; align-items: center">
                <div style="display: flex; align-items: center; margin-left: 10mm">
                  <input type="checkbox" :checked="scope.item.contentList[0].isSelected == 0" />是
                </div>
                <div style="display: flex; align-items: center; margin-left: 10mm">
                  <input type="checkbox" :checked="scope.item.contentList[0].isSelected == 1" />否
                </div>
              </div>
            </td>
          </tr>
          <tr v-if="index !== 0" ::key="index" v-for="(item, index) in scope.item.contentList">
            <td
              colspan="8"
              style="text-align: left; height: 10mm;max-width: 100mm;"
            >{{ index + 1 }}、{{ item.contentLabel }}</td>
            <td rowspan="1" style="width: 60mm">
              <div style="display: flex; align-items: center">
                <div style="display: flex; align-items: center; margin-left: 10mm">
                  <input type="checkbox" :checked="item.isSelected == 0" />是
                </div>
                <div style="display: flex; align-items: center; margin-left: 10mm">
                  <input type="checkbox" :checked="item.isSelected == 1" />否
                </div>
              </div>
            </td>
          </tr>

          <tr>
            <td
              :rowspan="scope.item.projectList.length + 2"
              style="width: 5mm; padding: 2mm; line-height: 13px"
            >数据确认</td>
            <td colspan="2" rowspan="2" style="font-weight: 600; height: 10mm;width:30mm">检测项目</td>
            <td colspan="2" rowspan="2" style="font-weight: 600;width: 60mm">测试结果</td>
            <td colspan="5" rowspan="1" style="font-weight: 600;width: 120mm">要求(无相应标准、规范、规程要求的参照公司规定)</td>
          </tr>
          <tr>
            <td colspan="3" style="font-weight: 600;width: 60mm">标准、规范、规程要求</td>
            <td colspan="2" style="font-weight: 600;width: 60mm">公司规定</td>
          </tr>
          <tr v-for="(e, i) in scope.item.projectList.length">
            <td colspan="2" style="max-width: 45mm; word-wrap: break-word;">
              {{
              (scope.item.projectList[i] &&
              scope.item.projectList[i].projectName) ||
              ""
              }}
            </td>
            <td colspan="2" style="width: 60mm; ">
              {{
              (scope.item.projectList[i] &&
              scope.item.projectList[i].result) ||
              ""
              }}
            </td>
            <td colspan="3" style="width: 60mm;">
              {{
              (scope.item.projectList[i] &&
              scope.item.projectList[i].request) ||
              ""
              }}
            </td>
            <td colspan="2" style="width: 60mm;">
              {{
              (scope.item.projectList[i] &&
              scope.item.projectList[i].companyRequest) ||
              ""
              }}
            </td>
          </tr>
          <tr>
            <td colspan="11" style="height: 60mm">
              <div style="text-align: left">
                <div style="font-weight: 600">根据证书、报告内容可确定:</div>
                <div
                  style="margin-left: 10mm;max-width: 260mm;"
                  ::key="index"
                  v-for="(item, index) in scope.item.itemList"
                >
                  <input type="checkbox" :checked="item.isSelected == 0" />
                  <span v-for="(i, e) in item.contentLabel.split('###')">
                    {{ i }}
                    <span
                      style="margin: 0 20px"
                      v-if="e == 0 && item.contentValue == 1"
                    >{{ item.param1 }}</span>
                  </span>
                </div>
                <!-- <div style="margin-left: 10mm">
                  <input
                    type="checkbox"
                  />根据证书/报告数据、结论判定，该设备校准结果满足()要求，可以使用
                </div>
                <div style="margin-left: 10mm">
                  <input
                    type="checkbox"
                  />根据证书/报告数据、结论判定该设备须降级使用。
                </div>
                <div style="margin-left: 10mm">
                  <input
                    type="checkbox"
                  />根据检测/校准、测试产生的修正因子要对设备进行修正，修正情况。
                </div>-->
              </div>
              <div
                style="
                  display: flex;
                  justify-content: flex-end;
                  text-align: left;
                  margin-top: 30px;
                "
              >
                <div style="width: 40mm; position: relative">
                  确认人：
                  <img
                    style="width: 80px; position: absolute; top: -10px"
                    :src="$VUE_APP_IMG_API + scope.item.esign"
                  />
                </div>
                <div style="width: 40mm">
                  <!-- {{ checkHistoryNode(scope, "start").endTime }} -->
                  日期：{{ scope.item.confirmTime }}
                </div>
              </div>
            </td>
          </tr>
          <tr>
            <td colspan="11" style="height: 20mm; position: relative">
              <div
                style="
                  position: absolute;
                  top: 55px;
                  left: 50px;
                  width: 500px;
                  text-align: left;
                "
              >
                <template
                  v-if="CheckApprove(scope, 'jcbfzr').ShowMessage"
                >{{ CheckApprove(scope, "jcbfzr").MessageText }}</template>
              </div>
              <div style="text-align: left">
                <div>检测部负责人意见:</div>
              </div>
              <div style="display: flex">
                <div style="margin-left: 10mm; display: flex; align-items: center">
                  <input
                    type="checkbox"
                    :checked="checkHistoryNodeComment(scope, 'jcbfzr').type == 1
                    "
                  />可投入使用
                </div>
                <div style="margin-left: 10mm; display: flex; align-items: center">
                  <input
                    type="checkbox"
                    :checked="checkHistoryNodeComment(scope, 'jcbfzr').type == 3
                    "
                  />不可投入使用
                </div>
              </div>
              <div
                style="
                  display: flex;
                  justify-content: flex-end;
                  text-align: left;
                  margin-top: 20px;
                "
              >
                <div style="width: 40mm; position: relative">
                  签字：
                  <template v-if="CheckApprove(scope, 'jcbfzr').ShowImg">
                    <img
                      style="width: 80px; position: absolute; top: -10px"
                      :src="CheckApprove(scope, 'jcbfzr').ApproveImg"
                    />
                  </template>
                </div>
                <div style="width: 40mm">日期： {{ checkHistoryNode(scope, "jcbfzr").endTime }}</div>
              </div>
            </td>
          </tr>
          <tr>
            <td colspan="11" style="height: 20mm; position: relative">
              <div
                style="
                  position: absolute;
                  top: 55px;
                  left: 50px;
                  width: 500px;
                  text-align: left;
                "
              >
                <template
                  v-if="CheckApprove(scope, 'jsfzr').ShowMessage"
                >{{ CheckApprove(scope, "jsfzr").MessageText }}</template>
              </div>
              <div style="text-align: left">
                <div>技术负责人意见:</div>
              </div>
              <div style="display: flex">
                <div style="margin-left: 10mm; display: flex; align-items: center">
                  <input
                    type="checkbox"
                    :checked="checkHistoryNodeComment(scope, 'jsfzr').type == 1"
                  />同意
                </div>
                <div style="margin-left: 20mm; display: flex; align-items: center">
                  <input
                    type="checkbox"
                    :checked="checkHistoryNodeComment(scope, 'jsfzr').type == 2 ||
                    checkHistoryNodeComment(scope, 'jsfzr').type == 3
                    "
                  />不同意
                </div>
              </div>
              <div
                style="
                  display: flex;
                  justify-content: flex-end;
                  text-align: left;
                  margin-top: 20px;
                "
              >
                <div style="width: 40mm; position: relative">
                  签字：
                  <template v-if="CheckApprove(scope, 'jsfzr').ShowImg">
                    <img
                      style="width: 80px; position: absolute; top: -10px"
                      :src="CheckApprove(scope, 'jsfzr').ApproveImg"
                    />
                  </template>
                </div>
                <div style="width: 40mm">日期：{{ checkHistoryNode(scope, "jsfzr").endTime }}</div>
              </div>
            </td>
          </tr>
          <tr>
            <td
              colspan="11"
              style="text-align: left; font-weight: 600"
            >备注:如确认表填写对象为主设备，确认栏中应为成套设备含自身)的总体确认。</td>
          </tr>
        </table>
        <!-- 底部信息位置 -->
        <div class="page-bottom" style="page-break-after: always">
          <div class="desc">注：本表格自2024年5月1日起生效。</div>
        </div>
      </template>
    </PrintBox>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import {
  listResultConfirm,
  delResultConfirm
} from "@/api/device/resultConfirm.js";
import { deptTreeSelect } from "@/api/system/user.js";
import printStyle from "@/utils/print.js";

export default {
  name: "buy",
  dicts: ["sys_device_type", "sys_device_cert_type", "sys_organ_type"],

  data() {
    return {
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      dataList: [],
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      deptOptions: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        deviceName: undefined,
        operUserId: undefined,
        licenseNum: undefined,
        checkDate: null,
        deptId: []
      },
      // 日期范围
      dateRange: [],

      userList: [],
      deptOptions: [],
      infos: [], //勾选的数据
      printList: []
    };
  },
  created() {
    const str = sessionStorage.getItem("queryParams");
    if (str) {
      this.queryParams = JSON.parse(str);
      if (this.queryParams.startEndDate) {
        this.dateRange.push(
          this.queryParams.startEndDate,
          this.queryParams.endEndDate
        );
      }
      setTimeout(() => {
        sessionStorage.removeItem("queryParams");
      }, 500);
    }
    this.getList();
    this.getDeptTree();
  },
  methods: {
    handleClone(row) {
      sessionStorage.setItem("queryParams", JSON.stringify(this.queryParams));
      // if (this.infos[0].status != "end") {
      //   this.$message.warning("只能克隆已完成的数据");
      //   return;
      // }
      const configId = row.deviceResultConfirmId || this.ids;
      this.$router.push(
        "./addResultConfirm?isClone=true&id=" +
          configId +
          "&value=1" +
          "&flag=克隆"
      );
    },
    printBox() {
      //infos  勾选的数据 如果有勾选就打印勾选。
      if (this.infos.length) {
        this.printList = this.infos;
      } else {
        //反之打印当前整个列表
        this.printList = this.dataList;
      }

      setTimeout(() => {
        document.title = "设备校准结果符合性确认表 STET/B/22-3";

        this.$print({
          printable: "printBox", //打印区域id
          type: "html", //打印类型是html
          scanStyles: false,
          targetStyles: ["*"],
          style: this.workStyle(),
          onPrintDialogClose: () => {
            document.title = process.env.VUE_APP_TITLE;
          }
        });
      }, 500);
    },
    // 可以自定义样式  printStyle 是公共样式 切勿私自修改
    workStyle() {
      return `${printStyle}
        table,
        table tr th,
        table tr td {
          padding: 4px;
        }
        .desc{
        text-align: left; font-size: 12px; margin-top: 10px
      }
            .df {
                display: flex;
              }
      `;
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.deviceResultConfirmId);
      this.infos = selection;
      this.single = selection.length != 1;
      this.multiple = !selection.length;
    },

    /** 修改按钮操作 */
    handleUpdate(row) {
      sessionStorage.setItem("queryParams", JSON.stringify(this.queryParams));
      const configId = row.deviceResultConfirmId || this.ids;
      this.$router.push("./addResultConfirm?isEdit=true&id=" + configId);
    },
    /** 查询部门下拉树结构 */
    getDeptTree() {
      deptTreeSelect().then(response => {
        this.deptOptions = response.data;
      });
    },
    handleDetail(row) {
      console.log(row);
      // this.$router.push(
      //   "./addResultConfirm?isInfo=true&id=" + row.deviceResultConfirmId
      // );
      sessionStorage.setItem("queryParams", JSON.stringify(this.queryParams));
      const configId = row.deviceResultConfirmId || this.ids;
      if (row.status == "draft") {
        this.$router.push("./addResultConfirm?isEdit=true&id=" + configId);
      } else {
        this.$router.push({
          path: "/resultConfirm/process/detail/" + row.piid,
          query: {
            definitionId: null,
            deployId: null,
            taskId: null,
            finished: false,
            id: row.deviceResultConfirmId
          }
        });
      }
    },

    /** 删除按钮操作 */
    handleDelete(row) {
      const configId = row.deviceResultConfirmId || this.ids;

      this.$modal
        .confirm('是否确认删除ID为"' + configId + '"的数据项？')
        .then(function() {
          return delResultConfirm(configId);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
    handleAdd() {
      this.$router.push("./addResultConfirm");
    },
    /** 查询列表 */
    getList() {
      this.loading = true;

      listResultConfirm({
        ...this.addDateRangeTime(
          this.queryParams,
          this.dateRange,
          "startEndDate",
          "endEndDate"
        ),
        deptId: this.queryParams.deptId.slice(-1)[0]
      }).then(response => {
        this.dataList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    handleExport() {
      this.download(
        "system/resultConfirm/export",
        {
          ...this.queryParams
        },
        `设备校准结果确认审批记录表_${this.parseTime(
          new Date().getTime(),
          "{y}-{m}-{d}"
        )}.xlsx`
      );
    }
  }
};
</script>
<style lang="scss" scoped>
::v-deep .el-dialog__body {
  img {
    width: 100%;
  }
}

.table-page {
  width: 100%;
}
</style>
